body {
    max-width: 540px;
    min-width: 320px;
    margin:0 auto;
    /* normal:正常字体,14px/1.5倍行距 */
    font: normal 14px/1.5 Tahoma, "Lucida Grande", Verdana, "Microsoft Yahei", STXihei, hei;
    /* 永远不会出现水平滚动条 */
    overflow-x: hidden;
    /* 防止元素被点击后背景会高亮 */
    -webkit-tap-highlight-color: transparent;
    background-color: #f2f2f2;
    color: #000;
  }

  ul{
      list-style: none;
      margin: 0;
      padding: 0;
  }

  a {
        /* 超链接无下划线 */
        text-decoration: none;
        color:#222;
  }

  div {
    /* css3盒模型,免去计算边框 */
    box-sizing: border-box;
  }


  /* 搜索模块 */
  .search-index{
    position: fixed;
    top: 0;
    /* 居中的算法:让盒子定位到水平的50%,然后向左走盒子宽度的一半 */
    left: 50%;
    /* 兼容性写法,兼容老版本的谷歌浏览器 */
    -webkit-transform: translateX(-50%);
      /* 固定定位的盒子比较特殊和父元素没有关系,它以屏幕为准,固定定位的盒子需要写宽度
       因为这里的宽度可能会缩放,可以使用css3的transform:translateX(-50%);自身盒子有多宽,我就向左走自己的一半即可
    */
    transform:translateX(-50%);
    width: 100%;
    max-width: 540px;
    min-width: 320px;
    height: 44px;
    /* background-color: pink; */
    /* 因为这里已经有定位了,margin:0 auto;是无效的 */
    /* margin: 0 auto; */

    display: flex;
    background-color: #f6f6f6;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  .search{
    position: relative;
    height: 26px;
    /* 由于css3盒子模型,会将盒子的高包括边框,那么我们行高减去上下两个边框1px,这样才是真正的垂直居中点 */
    line-height: 24px;
    border: 1px solid #ccc;
    margin: 7px 10px;
    /* 圆角 */
    border-radius: 5px;
    flex:1;
    font-size: 12px;
    color: #666;
    padding-left: 24px;
    /* 不用padding-left缩进文字,也可以用text-indent */
     /* text-indent: 22px; */
    box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
  }

  .search::before{
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: url(../images/sprite.png) no-repeat -59px -279px;
    background-size: 104px auto;
    position:absolute;
    top: 5px;
    left: 5px;
    
  }


  .user{
    width: 44px;
    height: 44px;
    /* background-color:purple; */
    font-size: 12px;
    text-align: center;
    color: #2eaae0;
  }

  /* 伪类在.user的前面 */
  .user::before {
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    background: url(../images/sprite.png) no-repeat -59px -194px;
    /* 缩放精灵图,缩放1倍,宽度104px,高度自动 */
    background-size: 104px auto;
    /* 居中:上 左右 下  */
    margin: 4px auto -2px;
  }

  /* focus */

  /* .search-index上面是固定定位,是不占页面的位置的,所以这里设置和.search-index盒子高度一样的padding-top */
  .focus{
    padding-top: 44px;
  }
  
  .focus img{
     width: 100%;
  }

  /* 局部导航栏 */
  .local-nav{
    height: 64px;
    background-color: #fff;
    border-radius: 8px;
    margin: 3px 4px;
    display: flex;
  }

  .local-nav li {
      flex:1;
  }

  .local-nav li a{
    display: flex;
    flex-direction: column;
     /* 侧轴居中对齐,单行 */
    align-items: center; 
    font-size: 12px;
  }

  /* [class^="local-nav-icon"]:代表class以local-nav-icon开头的*/
 .local-nav li [class^="local-nav-icon"] {
     width: 32px;
     height: 32px;
     background-color: pink;
     margin-top: 8px;
     background: url(../images/localnav_bg.png) no-repeat 0 0;
     background-size: 32px auto;
  } 

  .local-nav li .local-nav-icon-icon2{
    background: url(../images/localnav_bg.png) no-repeat 0 -32px;
    background-size: 32px auto;
  }

  .local-nav li .local-nav-icon-icon3{
    background: url(../images/localnav_bg.png) no-repeat 0 -64px;
    background-size: 32px auto;
  }

  .local-nav li .local-nav-icon-icon4{
    background: url(../images/localnav_bg.png) no-repeat 0 -96px;
    background-size: 32px auto;
  }

  .local-nav li .local-nav-icon-icon5{
    background: url(../images/localnav_bg.png) no-repeat 0 -128px;
    background-size: 32px auto;
  }

  /* nav */
  nav{
    border-radius: 8px;
    /* 这里给了最外层盒子圆角,里面的盒子大于外面的盒子,将圆角挡住了,所以加上overflow: hidden将圆角显示出来 */
    overflow: hidden;
    /* 上 左右 下 */
    margin: 0 4px 3px;
    
  }

  .nav-common{
    height: 88px;
    display: flex;
  }

  .nav-common:nth-child(2){
    margin: 3px 0;
  }

  .nav-items{
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .nav-items a {
    flex:1;
    text-align: center;
    line-height: 44px;
    color: #fff;
    font-size: 14px;
    /* 文字阴影 */
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  }

  /* .nav-items下所有第一个a标记添加下边框  */
  .nav-items a:nth-child(1){
     border-bottom:1px solid #fff;
  }

  /* 第一个.nav-items的div下的a标签不需要下边框 */
  .nav-items:nth-child(1) a{
    border: 0;
    /* 垂直底部对齐,水平居中 */
    background: url(../images/hotel.png) no-repeat bottom center;
    background-size: 121px auto;
  }

  /* -n+2:代表选择前面两个元素 */
  .nav-items:nth-child(-n+2){
    border-right: 1px solid #fff;
  }

  .nav-common:nth-child(1){
    background: -webkit-linear-gradient(left,#FA5A55,#FA994D);
  }

  .nav-common:nth-child(2){
    background: -webkit-linear-gradient(left,#4B90ED,#53BCED);
  }

  .nav-common:nth-child(3){
    background: -webkit-linear-gradient(left,#34C2A9,#6CD559);
  }

  .subnav-entry{
    background-color: #fff;
    border-radius: 8px;
    margin: 0 4px;
    display: flex;
    flex-wrap: wrap;
    padding: 5px 0;
  }

  .subnav-entry li{
    /* 里面的子盒子可以写%相对于父级来说的,各占20%那么10个盒子就分为两行了.只要用100除以一行要几个元素,假设一行6个元素,则100/6=16.66% */
    flex: 20%;
  }

  .subnav-entry a{
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .subnav-entry-icon{
    width: 28px;
    height: 28px;
    background-color: pink;
    margin-top: 4px;
    background: url(../images/subnav-bg.png) no-repeat;
    background-size:28px auto ;
  }

  
  /* sale-box */
  .sale-box{
    border-top: 1px solid #bbb;
    background-color: #fff;
    margin:4px
  }

  .sales-hd{
    height: 44px;
    border-bottom: 1px solid #ccc;
    position:relative;
  }

  .sales-hd h2{
    position: relative;
    /* 将文字偏移和隐藏 */
    text-indent: -999px;
    overflow: hidden;
    
    /*  */
  }

  .sales-hd h2::after{
     position: absolute;
     top: 8px;
     left: 20px;
     content: "";
     width: 79px;
     height: 15px;
     background:url(../images/hot.png) no-repeat 0 -20px;
     background-size:79px auto ;
  }

  .more {
     position:absolute;
     right: 5px;
     top: 0;
     border-radius: 15px;
     background:-webkit-linear-gradient(left,#FF506C,#FF6BC6);
     padding: 3px 20px 3px 10px;
     color: #fff;
  }

  /* 依靠上边框和有边框,让其旋转45度,做出一个 ">" 箭头 */
  .more::after{
    content: "";
    position:absolute;
    top: 9px;
    right: 9px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    /* 顺时针旋转45度 */
    transform: rotate(45deg);
  }

  .row{
    display: flex;
  }

  .row a{
    flex:1;
    border-bottom: 1px solid #eee;
    
  }

  /* 给第一个a标记加边框 */
  .row a:nth-child(1){
    border-right: 1px solid #eee;
  }

  .row a img{
     /* 图片比a标记大,会超a标记范围,指定width:100%,让图片的宽度和a一样宽 */
     width: 100%;
  }

